<template>
  <div class="product-main-list">
    <el-collapse>
      <el-collapse-item title="商品管理介绍">
        <div>商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>
      </el-collapse-item>
    </el-collapse>
    <el-collapse class="margin-30">
      <el-collapse-item title="条件查询">
        <el-form ref="form" :model="productSearchForm" label-width="80px" :inline="false" size="mini">
          <el-row :gutter="20">
            <el-col :span="5" :offset="0">
              <el-form-item label="商品名称">
                <el-input v-model="productSearchForm.name" placeholder="商品名称/模糊查询" />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-form-item label="商品货号">
                <el-input v-model="productSearchForm.productSn " placeholder="商品货号" />
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-form-item label="品牌">

                <el-select v-model="productSearchForm.brandId" style="width:100%" placeholder="品牌" clearable filterable>
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-form-item label="上架状态">
                <!-- publishStatus (integer, optional): 上架状态，0->下架；1->上架 , -->
                <el-select v-model="productSearchForm.publishStatus" style="width:100%" placeholder="上架状态" clearable filterable>
                  <el-option
                    label="上架"
                    :value="1"
                  />
                  <el-option
                    label="下架"
                    :value="0"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="0">
              <el-form-item label="审核状态">
                <!-- verifyStatus (integer, optional): 审核状态：0->未审核；1->审核通过 -->
                <el-select v-model="productSearchForm.verifyStatus" style="width:100%" placeholder="审核状态" clearable filterable>
                  <el-option
                    label="审核通过"
                    :value="1"
                  />
                  <el-option
                    label="未审核"
                    :value="0"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="12">
              <el-form-item>
                <el-button>重置</el-button>
                <el-button type="primary">搜索</el-button>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>

      </el-collapse-item>
    </el-collapse>

    <!-- 商品列表 -->
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-button type="primary" size="mini" @click="goAddProduct">新增</el-button>
        <el-button type="primary" size="mini" @click="export2Excel">导出商品Excel表格</el-button>

      </div>
      <el-table :data="productList" border stripe>
        <el-table-column
          type="index"
          label="#"
          width="50"
          align="center"
        />
        <el-table-column
          label="商品图片"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <img width="80" height="80" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.name }}</div>
            <div>{{ scope.row.brandName }}</div>
            <div>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="标签"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <!-- recommendStatus (integer, optional): 推荐状态；0->不推荐；1->推荐 , -->
            最新：<el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0" />
            <br>
            推荐：<el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0" />
            <!-- newStatus (integer, optional): 新品状态:0->不是新品；1->新品 , -->

          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" style="color:#409eff" @click="goEditProduct(scope.row.id)">编辑</el-button>
            <el-button type="text" size="mini" style="color:#ff0000">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

    </el-card>

  </div>
</template>
<script>
import {
  findAllBrand as findAllBrandApi,
  productsByPage as productsByPageApi
} from '@/api/product'
import mix from '@/mixins'
export default {
  name: 'ProductList',
  mixins: [mix],
  data() {
    return {
      productSearchForm: {},
      brandList: [],
      productList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getBrandList()
    this.getProductList()
  },
  mounted() {
  },
  methods: {
    // 导出 Excel 表格
    export2Excel() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品名称', '商品价格', '创建时间']
        // const productData = [
        //   ['iphone18', 10000, '2023年2月13日'],
        //   ['iphone19', 10000, '2023年2月13日'],
        //   ['iphone20', 10000, '2023年2月13日'],
        //   ['iphone21', 10000, '2023年2月13日'],
        //   ['iphone22', 10000, '2023年2月13日']
        // ]
        const filterVal = ['name', 'price', 'createTime']
        const list = this.productList
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'demom', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    // 获取品牌列表
    async getBrandList() {
      const res = await findAllBrandApi()
      const { success, data, message } = res
      if (success) {
        this.brandList = data.items
      } else {
        this.$message.error(message)
      }
    },
    // 获取商品列表
    async getProductList() {
      // 过滤 ,this.productSearchForm
      const res = await productsByPageApi(this.paginationObj.start, this.paginationObj.limit, this.productSearchForm)
      const { success, data, message } = res
      if (success) {
        this.productList = data.rows
        this.paginationObj.total = data.total
      } else {
        this.$message.error(message)
      }
    },
    // 跳转商品详情页面
    goAddProduct() {
      this.$router.push({ name: 'ProductDetail' })
    },
    // 编辑商品
    goEditProduct(id) {
      this.$router.push({ name: 'ProductDetail', params: { id }})
    }
  }
}
</script>
<style lang="scss" scoped>
.product-main-list{
  .el-collapse{
    padding-bottom: 10px;
    background-color: #fff;
    text-indent: 10px;
  }
}
</style>
